<div class="row">
    </br>
    <div class="page-header  position-relative">
        <h3>Recetas ABC(Filtro general)</h3>
    </div>
</div>
<!--Div tipo Fila, es similar a la fila de una tabla-->
<div class="row">
    <div>
        <a href="Busqueda.html">A</a>&nbsp; 
        <a href="Busqueda.html">B</a>&nbsp; 
        <a href="Busqueda.html">C</a>&nbsp; 
        <a href="Busqueda.html">D</a>&nbsp; 
        <a href="Busqueda.html">E</a>&nbsp; 
        <a href="Busqueda.html">F</a>&nbsp; 
        <a href="Busqueda.html">G</a>&nbsp;
        <a href="Busqueda.html">H</a>&nbsp; 
        <a href="Busqueda.html">I</a>&nbsp; 
        <a href="Busqueda.html">J</a>&nbsp; 
        <a href="Busqueda.html">K</a>&nbsp; 
        <a href="Busqueda.html">L</a>&nbsp; 
        <a href="Busqueda.html">M</a>&nbsp; 
        <a href="Busqueda.html">N</a>&nbsp;
        <a href="Busqueda.html">O</a>&nbsp; 
        <a href="Busqueda.html">P</a>&nbsp; 
        <a href="Busqueda.html">Q</a>&nbsp; 
        <a href="Busqueda.html">R</a>&nbsp; 
        <a href="Busqueda.html">S</a>&nbsp; 
        <a href="Busqueda.html">T</a>&nbsp; 
        <a href="Busqueda.html">U</a>&nbsp;
        <a href="Busqueda.html">V</a>&nbsp; 
        <a href="Busqueda.html">W</a>&nbsp; 
        <a href="Busqueda.html">X</a>&nbsp; 
        <a href="Busqueda.html">Y</a>&nbsp; 
        <a href="Busqueda.html">Z</a>&nbsp;
    </div>
    <br />
</div>

<div class="row">
    <div class="panel pull-left" style="width: 70%;">
        <!-- Carousel
            ================================================== -->
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner ">
                <div class="item active center-block " style="width: 400px; max-height: 100%; height: auto;
                    position: relative;">
                    <a href="#">
                        <img src="image/ComidaChina1.jpg" alt="Arroz chaufa" class="img-thumbnail img-responsive" />
                    </a>
                    <!--<img data-src="image/ComidaChina1.jpg" alt="First slide"/>-->
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/ComidaChina2.jpg" alt="Pollo Enrollado" class="img-thumbnail img-responsive" />
                    </a>
                    <!--<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide">-->
                    <div class="container">
                        <div class="carousel-caption">
                            <!--<a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>-->
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/comidachina3.jpg" alt="Pollo con verduras" class="img-thumbnail img-responsive " />
                    </a>
                    <!--<img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide">-->
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/comidadelaSelva1.jpg" alt="Tacacho con Cecina" class="img-thumbnail img-responsive " />
                    </a>
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/comidadelaSelva2.jpg" alt="Zarapatera" class="img-thumbnail img-responsive " />
                    </a>
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/comidadelaSelva3.jpg" alt="Patarashca" class="img-thumbnail img-responsive " />
                    </a>
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/comidadelaSelva4.jpg" alt="Chaufa Selvatico" class="img-thumbnail img-responsive " />
                    </a>
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/comidacriolla1.jpg" alt="Lomo Saltado" class="img-thumbnail img-responsive " />
                    </a>
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/comidacriolla2.jpg" alt="Aj&iacute; de Gallina" class="img-thumbnail img-responsive " />
                    </a>
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/comidacriolla3.jpg" alt="Parihuela" class="img-thumbnail img-responsive " />
                    </a>
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/comidacriolla4.jpg" alt="Seco de Fejoles" class="img-thumbnail img-responsive " />
                    </a>
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
                <div class="item center-block" style="width: 400px; max-height: 100%; height: auto;">
                    <a href="#">
                        <img src="image/comidacriolla5.jpg" alt="Cebiche de Pescado" class="img-thumbnail img-responsive " />
                    </a>
                    <div class="container">
                        <div class="carousel-caption">
                        </div>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left">
            </span></a><a class="right carousel-control" href="#myCarousel" data-slide="next"><span
                class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
        <!-- /.carousel -->
    </div>
    <div class="panel panel-danger pull-right" style="width: 30%">
        <div class="panel-heading">
            <h3 class="panel-title">
                Receta del d&iacute;a</h3>
        </div>
        <div class="panel-body">
            Preparar el arroz con kion y poca sal. Aparte, batir los huevos ligeramente, sazonarlos
            y fre&iacute;rlos en una sart&eacute;n con poco aceite...
            <br />
            <a href="#">Leer m&aacute;s</a>
        </div>
    </div>
</div>
<div class="row">
    <div class="panel panel-danger pull-left" style="width: 70%">
        <div class="panel-heading">
            <h3 class="panel-title">
                Las m&aacute;s buscadas</h3>
        </div>
        <div class="panel-body">
            <div class="list-group">
                <a href="#" class="list-group-item ">
                    <h4 class="list-group-item-heading">
                    </h4>
                    <p class="list-group-item-text">
                        Receta de "Aj&iacute; de gallina"... <span class="glyphicon glyphicon-star"></span><span
                            class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
                        </span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty">
                        </span>
                    </p>
                </a><a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">
                    </h4>
                    <p class="list-group-item-text">
                        Receta de "arroz con pollo"... <span class="glyphicon glyphicon-star"></span><span
                            class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
                        </span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty">
                        </span>
                    </p>
                </a><a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">
                    </h4>
                    <p class="list-group-item-text">
                        Receta de "Pollo enrollado"... <span class="glyphicon glyphicon-star"></span><span
                            class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
                        </span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty">
                        </span>
                    </p>
                </a>
            </div>
            <br />
            <a href="#">Leer m&aacute;s</a>
        </div>
    </div>
    <div class="panel pull-right">
        <div class="panel-heading">
            <h3 class="panel-title">
                Publicidad</h3>
        </div>
        <div class="panel-body">
            <!--aqui va algunas ofertas-->
        </div>
    </div>
</div>
<div class="row">
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">
                Registrate en &iquest;Qu&eacute; cocinar&eacute;?</h3>
        </div>
        <div class="panel-body">
            <div class="pull-left">
                <div class="container-fluid">
                    <p>
                        <span class="glyphicon glyphicon-check"></span>&nbsp;Crea tu perfil
                    </p>
                    <p>
                        <span class="glyphicon glyphicon-floppy-disk"></span>&nbsp;Guarda tu receta
                    </p>
                    <p>
                        <span class="glyphicon glyphicon-share-alt"></span>&nbsp;Comparte tus recetas
                    </p>
                    <a href="register.html" class="list-inline">>>empieza aqu&iacute;... </a>
                </div>
            </div>
            <div class="pull-left">
                colocar imagen
            </div>
        </div>
    </div>
</div>